<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="user-info-card">
          <div class="user-avatar">
            <el-avatar :size="100" :src="userInfo.avatar || defaultAvatar"></el-avatar>
          </div>
          <div class="user-name">{{ userInfo.name || '用户名' }}</div>
          <div class="user-role">{{ userInfo.roles && userInfo.roles.length > 0 ? userInfo.roles.join(', ') : '角色' }}</div>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card>
          <el-tabs v-model="activeTab">
            <el-tab-pane label="基本资料" name="basic">
              <el-form :model="userForm" label-width="100px">
                <el-form-item label="用户名">
                  <el-input v-model="userForm.username" disabled></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                  <el-input v-model="userForm.name"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                  <el-input v-model="userForm.email"></el-input>
                </el-form-item>
                <el-form-item label="手机">
                  <el-input v-model="userForm.phone"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="updateUserInfo">保存</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="password">
              <el-form :model="passwordForm" label-width="100px">
                <el-form-item label="原密码">
                  <el-input v-model="passwordForm.oldPassword" type="password"></el-input>
                </el-form-item>
                <el-form-item label="新密码">
                  <el-input v-model="passwordForm.newPassword" type="password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码">
                  <el-input v-model="passwordForm.confirmPassword" type="password"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="changePassword">修改密码</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { reactive, ref, computed } from 'vue';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';
import { updateUserInfo, changePassword } from '@/api/user';

export default {
  name: 'Profile',
  setup() {
    const store = useStore();
    const activeTab = ref('basic');
    const defaultAvatar = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png';
    
    // 用户信息
    const userInfo = computed(() => store.getters.userInfo || {});
    
    // 用户表单
    const userForm = reactive({
      username: userInfo.value.username || '',
      name: userInfo.value.name || '',
      email: userInfo.value.email || '',
      phone: userInfo.value.phone || ''
    });
    
    // 密码表单
    const passwordForm = reactive({
      oldPassword: '',
      newPassword: '',
      confirmPassword: ''
    });
    
    // 更新用户信息
    const updateUserInfo = () => {
      updateUserInfo(userForm).then(() => {
        ElMessage.success('个人信息更新成功');
        store.dispatch('user/getUserInfo');
      });
    };
    
    // 修改密码
    const changePassword = () => {
      if (passwordForm.newPassword !== passwordForm.confirmPassword) {
        ElMessage.error('两次输入的密码不一致');
        return;
      }
      
      changePassword({
        oldPassword: passwordForm.oldPassword,
        newPassword: passwordForm.newPassword
      }).then(() => {
        ElMessage.success('密码修改成功');
        passwordForm.oldPassword = '';
        passwordForm.newPassword = '';
        passwordForm.confirmPassword = '';
      });
    };
    
    return {
      activeTab,
      userInfo,
      userForm,
      passwordForm,
      defaultAvatar,
      updateUserInfo,
      changePassword
    };
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  
  .user-info-card {
    text-align: center;
    padding: 20px;
    
    .user-avatar {
      margin-bottom: 20px;
    }
    
    .user-name {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    
    .user-role {
      color: #909399;
      font-size: 14px;
    }
  }
}
</style> 